<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <title>海报生成</title>
  <style>
    *,
    ::before,
    ::after {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    .poster-container {
      width: 295px;
      height: 525px;
      margin: 0 auto;
    }

    .poster-preview-img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 295px;
      height: 525px;
      margin: auto;
    }

    /** 邀请卡标题 */
    .info-title {
      margin-bottom: 8px;
      font-size: 24px;
      font-weight: bold;
    }

    /** 邀请卡内容 */
    .info-text {
      height: 48px;
      margin-bottom: 20px;
      font-size: 16px;
    }

    /** 邀请卡二维码 */
    .info-qr-code {
      position: relative;
    }

    /** 二维码容器 */
    .qr-code-container {
      width: 255px;
      height: 255px;
      margin-bottom: 20px;
    }

    .qr-code {
      width: 255px;
      height: 255px;
    }

    /** 店铺logo */
    .store-logo {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 50px;
      margin: auto;
    }

    .store-logo-img {
      width: 50px;
      height: 50px;
    }

    /** 内容 */
    .info-content {
      display: flex;
      flex-direction: column;
    }

    /** 用户昵称 */
    .user-name {
      font-size: 14px;
    }

    .poster-bg {
      width: 295px;
      height: 525px;
      padding: 24px 20px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border-radius: 20px;
    }

    /* 海报样式1 */
    .custom-poster-style1 .poster-bg {
      flex-direction: column;
      color: #000;
    }

    .custom-poster-style1 .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 35px;
    }

    .custom-poster-style1 .user-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
    }

    .custom-poster-style1 .user-name {
      margin-left: 8px;
    }

    .custom-poster-style1 .info-content {
      align-items: center;
    }

    .custom-poster-style1 .info-text {
      text-align: center;
    }

    .custom-poster-style1 .shop-info {
      font-size: 16px;
    }

    /* 海报样式2 */
    .custom-poster-style2 .poster-bg {
      position: relative;
      flex-direction: column;
      padding-bottom: 68px;
      overflow: hidden;
      color: var(--textColor);
    }

    .custom-poster-style2 .user-info {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      height: 68px;
      padding: 14px 20px;
      background: #fff;
    }

    .custom-poster-style2 .user-info-content {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
    }

    .custom-poster-style2 .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .custom-poster-style2 .shop-info {
      font-size: 14px;
    }
  </style>
  <script>
    // 优先使用window.domain（如果存在），否则使用默认域名
    const domain = window.domain || "https://example.com" // 这样就可以动态接收域名

    /**
     * 生成海报模板
     * @param {Object} formModel - 表单数据
     * @param {number} formModel.template - 海报样式
     * @param {string} formModel.background - 海报背景
     * @param {string} formModel.text - 邀请卡内容
     * @param {boolean} formModel.shopInfo - 门店信息
     * @param {boolean} formModel.storeLogo - 绑定店铺logo
     */
    function generateTemplate({ userName = "用户昵称", shopName = "店铺名称", avatar, storeLogo, qrCode, template = 1, background = "", text = "", isShopInfo = 1, isStoreLogo = 1 }) {
      const isStyle1 = template === 1
      const defaultBg = `https://dummyimage.com/295x525/f0f0f0/333333&text=会员海报背景`
      const defaultAvatar = `https://robohash.org/user?set=set4&size=150x150`

      return `
        <div  class="${isStyle1 ? "custom-poster-style1" : "custom-poster-style2"}">
          <div class="poster-bg" style="background-image: url(${background || defaultBg})">
            ${isStyle1
              ? `
                <!-- 用户信息 (样式1) -->
                <div class="user-info">
                  <img src="${avatar || defaultAvatar}" width="28" height="28" class="user-avatar" />
                  <div class="user-name">${userName}</div>
                </div>
                `
              : ""
            }
          
            <div class="info-content">
              <!-- 邀请卡 -->
              <div class="info-title">邀请卡</div>
              <div class="info-text">${text}</div>
    
              <div class="info-qr-code">
                <!-- 二维码 -->
                <div class="qr-code-container">
                  <img class="qr-code" src="${qrCode}" />
                </div>
                <!-- 店铺logo -->
                ${isShopInfo
                  ? `
                    <div class="store-logo">
                      <img src="${storeLogo}" class="store-logo-img" />
                    </div>
                    `
                  : ""
                }
              </div>
              ${isStyle1
                ? `
                  <!-- 门店信息 (样式1) -->
                  <div class="shop-info" style="opacity: ${isStoreLogo ? 1 : 0}">所属门店：${shopName}</div>
                  `
                : ""
              }
            </div>
            
            ${!isStyle1
              ? `
                <!-- 用户信息、门店信息 (样式2) -->
                <div class="user-info">
                  <img src="${avatar || defaultAvatar}" class="user-avatar" />
                  <div class="user-info-content">
                    <div class="user-name">${userName}</div>
                    ${isShopInfo ? `<div class="shop-info">所属门店：${shopName}</div>` : ""}
                  </div>
                </div>
                `
              : ""
            }
          </div>
        </div>
     `
    }
  </script>
</head>

<body>
  <div class="poster-container">
    <div class="poster-preview-img" id="custom-poster">
      <!-- 内容将通过JavaScript渲染 -->
    </div>
  </div>
  <script>
    /**
     * 获取海报
     */
    const customPoster = document.getElementById("custom-poster")
    const html = generateTemplate({
      userName: "小智",
      shopName: "智到店铺",
      avatar: `https://robohash.org/zhizhi?set=set4&size=150x150`,
      storeLogo: `https://dummyimage.com/200x80/0066cc/ffffff&text=智到店铺`,
      qrCode: `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https://example.com/invite`,
      template: 1, // 海报 样式1 2 样式2
      background: "", // 海报背景
      text: "邀请好友，解锁专属好礼", // 邀请卡内容
      isShopInfo: 1, // 门店信息
      isStoreLogo: 1 // 绑定店铺logo
    })
    customPoster.innerHTML = html
  </script>
</body>

</html>